<template>
  <div style="background-color: #fff; padding-bottom: 0; margin: 0 30px">
    <div style="font-size: 24px; line-height: 40px; margin-top: 20px">
      <span>{{ article.title }}</span>
    </div>
    <div style="margin-bottom: 10px">
      <span>{{ article.author }}</span>
    </div>
    <div v-html="article.content">{{ article.content }}</div>
  </div>
</template>

<script>
import { articleDetail } from '@/api/api';

export default {
  props: {
    articleId: [String, Number],
  },

  data() {
    return {
      article: {},
    };
  },
  watch: {
    $route: 'initData',
  },

  watch: {
    $route(to, from) {
      this.initData();
    },
  },

  created() {
    this.initData();
  },

  methods: {
    initData() {
      articleDetail({ id: this.articleId }).then((res) => {
        this.article = res.data.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
